<template>
  <div class="page">
    <my-header :backBtn="true">
      <div slot="title">{{ data.name }}</div>
    </my-header>
    <div class="weui-msg">
      <video ref="videoPlayer" class="video-js vjs-default-skin" />
      <div class="weui-msg__opr-area">
          <br/>
        <p class="weui-btn-area">
          <a
            href="javascript:history.back();"
            class="weui-btn weui-btn_primary"
            role="button"
            >关闭</a
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null,
      data: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.data = this.$route.query;
      let kinsfolkId = this.$Cookies.get("openId");      
      var url = this.$base64.decode(this.data.url);
      var decodeUrl = url.split("~");
      if (decodeUrl[1] != kinsfolkId) {
        this.data.url = '';
      }else{
        this.data.url = decodeUrl[0];
      }
      this.player = videojs(
        this.$refs.videoPlayer,
        {
          autoplay: true,
          controls: true,
          muted: false,
          loop: false,
          language: "zh-CN",
          fluid: true,
          sources: {
            src: this.data.url,
            type: "application/x-mpegURL",
          },
          notSupportedMessage: "此视频暂无法播放，请稍后再试",
          poster: "../../../static/img/zhibo.png",
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>